<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                background: url("../images/yz.png") no-repeat;
                background-size: 100%;
            }

            img {
                width: 100px;
                border-radius: 50%;
                position: absolute;
                top: 150px;
                left: 150px;
            }
            .box1{
                width: 400px;
                height: 400px;
                border: 1px solid white;
                border-radius: 50%;
                position: relative;
                margin: 50px auto;
                animation: move 10s infinite linear;
            }
            .box2{
                width: 300px;
                height: 300px;
                border: 1px solid white;
                border-radius: 50%;
                position: absolute;
                top: 100px;
                left: 530px;
                animation: move 5s infinite linear;
            }
            .box3{
                width: 200px;
                height: 200px;
                border: 1px solid white;
                border-radius: 50%;
                position: absolute;
                top: 150px;
                left: 580px;
                animation: move 3s infinite linear;
            }
            @keyframes move {
                0%{
                    transform: rotate(0);
                }
                100%{
                    transform: rotate(360deg);
                }
            }
            .box1 div,.box2 div,.box3 div{
                width: 20px;
                height: 20px;
                position: absolute;
                border-radius: 50%;
                background: aqua;
            }
            .box1 div{
                top: 47px;
                left: 50px;
            }
            .box2 div{
                top: 47px;
                left: 22px;
            }
            .box3 div{
                top: 47px;
                left: 0;
            }

        </style>
    </head>
    <body>

        <div class="box1">
            <div></div>
            <div></div>
            <div></div>
            <img src="../images/ty.png" alt="">
        </div>

        <div class="box2">
            <div></div>
        </div>
        <div class="box3">
            <div></div>
        </div>

    </body>
</html>